<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker datePickerMultiple demo with limit</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
            {
				$('.date-pick')
					.datePicker(
						{
							createButton:false,
							displayClose:true,
							closeOnSelect:false,
							selectMultiple:true,
							numSelectable:3
						}
					)
					.bind(
						'click',
						function()
						{
							$(this).dpDisplay();
							this.blur();
							return false;
						}
					)
					.bind(
						'dateSelected',
						function(e, selectedDate, $td, state)
						{
							console.log('You ' + (state ? '' : 'un') // wrap
								+ 'selected ' + selectedDate);
							
						}
					)
					.bind(
						'dpClosed',
						function(e, selectedDates)
						{
							console.log('You closed the date picker and the ' // wrap
								+ 'currently selected dates are:');
							console.log(selectedDates);
						}
					);
            });
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: datePicker with multiple select enabled and a limit on the number of selectable days</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                The following example shows how you can provide options to the date picker to allow you
				to select multiple dates. It extends the <a href="datePicekrMultiple.html">basic multiple select</a>
				example and shows how you can also pass a <em>numSelectable</em> to limit the number of dates that can
				be selected at a time... A class of <em>unselectable</em> is added to all dates which aren't selected
				once you have selected the numSelectable. In my example css this is styled the same as disabled dates but
				you can style it as you like...
            </p>
			<p>
				Thanks to ioframe for the <a href="http://code.google.com/p/jquery-datepicker/issues/detail?id=8">patch</a> which inspired this
				functionality :)
			<p>
				<strong>NOTE</strong>: You will need firebug to see the results of the demo - firebug lite is included in this page
				so whatever browser you are in just press F12 to open up the firebug console.
			</p>
			<p>
				<a href="noJs.html" class="date-pick">Click here</a> to see a date picker pop up next to
				that link. You can also <a href="noJs.html" class="date-pick">click here</a> to see different
				date picker pop up.
			</p>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">
$(function()
{
	$('.date-pick')
		.datePicker(
			{
				createButton:false,
				displayClose:true,
				closeOnSelect:false,
				selectMultiple:true,
				numSelectable:3
			}
		)
		.bind(
			'click',
			function()
			{
				$(this).dpDisplay();
				this.blur();
				return false;
			}
		)
		.bind(
			'dateSelected',
			function(e, selectedDate, $td, state)
			{
				console.log('You ' + (state ? '' : 'un') // wrap
					+ 'selected ' + selectedDate);
				
			}
		)
		.bind(
			'dpClosed',
			function(e, selectedDates)
			{
				console.log('You closed the date picker and the ' // wrap
					+ 'currently selected dates are:');
				console.log(selectedDates);
			}
		);
});</pre>
        </div>
	</body>
</html>